<template>
    <div class="menuManage">
        <div class="search">
            <div  class="search-form">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="菜单名称">
                        <el-input v-model="queryForm.Title" placeholder="请输入菜单名称" clearable />
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" color="#606266" @click="Search" icon="Search">搜索</el-button>
                    </el-form-item>
                    <el-form-item >
                        <el-button   @click="Refresh" icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
        </div>
        <div class="content">
            <div class="add-box">
                <el-button style="margin-left: 2rem;" type="primary" color="#606266" @click="handleAdd" icon="CirclePlus">添加菜单</el-button>
            </div>
            <div class="table-box">
                <el-table
                :data="tableData.data"
                style="width: 100%"
                row-key="Id"
                border
                lazy
                size="large"
                :load="load"
                >
                    <el-table-column prop="Title" label="菜单名称" align="center"></el-table-column>
                    <el-table-column prop="Pid" label="父级菜单" align="center">
                        <template #default="scope">
                            <span >{{ getParentName(scope.row.Pid) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Icon" label="图标" align="center" >
                        <template #default="scope">
                            <el-icon size="18"><component :is="scope.row.Icon"></component></el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Href" label="组件路径" align="center" ></el-table-column>
                    <el-table-column prop="Sort" label="排序" align="center" ></el-table-column>
                    <el-table-column prop="Action" label="操作" align="center" >
                        <template #default="scope" >
                            <el-button link  icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button v-if="scope.row.children.length === 0" link  icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination
                    v-model:current-page="queryForm.pageNum"
                    v-model:page-size="queryForm.pageSize"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="--el-color-primary: #009688;"
                />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="Shipping address" width="800">
            <el-form :model="menuForm">
                <el-form-item label="Id" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.Id" disabled  />
                </el-form-item>
                <el-form-item label="父级菜单" :label-width="formLabelWidth">
                    <el-tree-select
                        v-model="menuForm.Pid"
                        :data="parentMenu"
                        :render-after-expand="false"
                        show-checkbox
                        check-strictly
                        check-on-click-node
                    />
                </el-form-item>
                <el-form-item label="路由名称" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.Name"  />
                </el-form-item>
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.Title"  />
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth">
                    <IconSelect v-model="menuForm.Icon" ></IconSelect>
                </el-form-item>
                <el-form-item label="组件地址" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.Href"  />
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.Sort"  />
                </el-form-item>
                <el-form-item label="是否为父菜单" :label-width="formLabelWidth">
                    <el-select v-model="menuForm.IsParent">
                        <el-option :key="1" :value="1" :label="'是'"></el-option>
                        <el-option :key="0" :value="0" :label="'否'"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import { GetMenuList, addMenu, updateMenu, DeleteMenu } from "../../api/menu";
import IconSelect from "@/components/IconSelect/index.vue";
import { ElMessage } from "element-plus";
const queryForm = ref({
    Pid:"",
    Name: '',
    pageNum: 1,
    pageSize: 100
});
const tableData = ref([])
const dialogVisible = ref(false);
const isEdit = ref(false);
const parentMenu = ref([
    {
        value: "0",
        label: '一级菜单',
        children: []
    }
])
const formLabelWidth = '120px';

const menuForm = ref({
    Id: '',
    Name: '',
    Pid: '',
    Icon: '',
    Href: '',
    Sort: 0,
    Title: '',
    IsParent:null
})

const handleAdd = () => {
    isEdit.value = false;
    dialogVisible.value = true;
    menuForm.value = {
        Id: '',
        Name: '',
        Pid: '',
        Icon: '',
        Href: '',
        Sort: 0,
        Title: '',
        IsParent:0
    }
}

const getMenu = async () => {
    const res = await GetMenuList(queryForm.value);
    if(res){
        parentMenu.value[0].children = res.data.map(item => {
            if(item.Pid === "0") {
                return {
                    value: item.Id,
                    label: item.Title
                }
            }
        });
        tableData.value = res;
    }
    
    
}

const handleSizeChange = async(size) => {
    console.log(size);
    queryForm.value.pageSize = size;
    getMenu();
}

const handleEdit = (row) => {
    isEdit.value = true;
    dialogVisible.value = true;
    console.log(parentMenu.value);
    menuForm.value = {
        Id: row.Id,
        Name: row.Name,
        Pid: row.Pid,
        Icon: row.Icon,
        Href: row.Href,
        Sort: row.Sort,
        Title: row.Title,
        IsParent:row.IsParent
    }
}

const submit = async () => {
    if(isEdit.value) {
        // 编辑
        const res = await updateMenu(menuForm.value);
        if(res){
            ElMessage.success("菜单更新成功");
        dialogVisible.value = false;
        getMenu();
        }
        
    } else {
        // 新增
        delete menuForm.value.Id; // 删除Id字段，因为新增时不需要
        const res = await addMenu(menuForm.value);
        if(res){
            ElMessage.success("菜单添加成功");
            dialogVisible.value = false;
            getMenu();
        }
    }
}

const handleDelete = async (row) => {
    console.log(row);
    const res = await DeleteMenu([row.Id]);
    if(res){
        ElMessage.success("菜单删除成功");
        getMenu();
    }
}

const Search = () => {
    console.log(queryForm.value);
    queryForm.value.pageNum = 1; // 重置页码
    getMenu();
}

const Refresh = () => {
    queryForm.value = {
        Pid:"",
        Name: '',
        Title: "",
        pageNum: 1,
        pageSize: 100
    }
    getMenu();
}

const getParentName = (Pid) => {
    const parent = parentMenu.value[0].children.find(item => item.value === Pid);
    return parent ? parent.label : '一级菜单';
}
onMounted(async () => {
    getMenu();
});
</script>

<style lang="less" scoped>
.menuManage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
    .search{
        width: 100%;
        height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 1%;
        padding-top:  10px;
        .search-form {
            margin-left: 2rem;
        }
    }
    .content{
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-bottom: 1px solid #eaeaea;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        .add-box {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            // margin-left: 2rem;
        }
        .table-box {
            flex: 1;
            overflow: auto;
        }
        .page-box {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}

</style>